<template>
  <div class="question">
    <div class="upLoadFile">
      <input type="file" ref="fileInput" @change="onFileChange" accept=".cpp" style="display: none;" @click="clickAdd" />
    </div>
    <div class="contain_chat" tabindex="0" style="position: relative;">
      <div v-if="selectedFileList.length !== 0" class="selectedFileList">
        <div v-for="(file, index) in selectedFileList" :key="index" style="display: flex;" class="selectedFileList-in">
          <div class="selectedFileList-in-border">
            <div class="file-img">
              <img src="/src/views/文件.png" style="width: 25px;height: 25px;">
            </div>
            <div @click="readFile" class="file-name">
              {{ file.name }}
              <div style="color: #fff;font-size: 14px;">
                c++文件
              </div>
            </div>
          </div>
          <button @click="removeFile(index)" style="font-size: 19px;border:0;outline:none;background-color: transparent;color: #fff;">×</button>
        </div>
      </div>
      <div class="others">
        <svg @click="triggerFileUpload" style="margin-top: 8px;" width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M9 7C9 4.23858 11.2386 2 14 2C16.7614 2 19 4.23858 19 7V15C19 18.866 15.866 22 12 22C8.13401 22 5 18.866 5 15V9C5 8.44772 5.44772 8 6 8C6.55228 8 7 8.44772 7 9V15C7 17.7614 9.23858 20 12 20C14.7614 20 17 17.7614 17 15V7C17 5.34315 15.6569 4 14 4C12.3431 4 11 5.34315 11 7V15C11 15.5523 11.4477 16 12 16C12.5523 16 13 15.5523 13 15V9C13 8.44772 13.4477 8 14 8C14.5523 8 15 8.44772 15 9V15C15 16.6569 13.6569 18 12 18C10.3431 18 9 16.6569 9 15V7Z"></path>
        </svg>
        <textarea ref="textareaRef" v-model="content" class="chat_input" :rows="rows" placeholder="请输入问题"></textarea>
        <div class="sendQuestion" @click="sendQuestion">
          <i :class="['fa-regular', 'fa-circle-up', isContentEmpty ? 'disabled' : 'enabled']" style="font-size: 30px;"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, watch, nextTick } from 'vue'

export default {
  name: 'FileUpload',
  props: {
    selectedFileList: {
      type: Array,
      default: () => []
    }
  },
  emits: ['file-change', 'remove-file', 'send-question', 'trigger-upload'],
  setup(props, { emit }) {
    const textareaRef = ref(null)
    const rows = ref(1)
    const content = ref('')

    const adjustTextareaSize = () => {
      let textarea = textareaRef.value
      textarea.style.height = 'auto'
      const height = textarea.scrollHeight
      if (height) {
        textarea.style.height = height + "px"
      }
    }

    watch(() => content.value, () => {
      nextTick(adjustTextareaSize)
    })

    const onFileChange = (event) => {
      const file = event.target.files[0]
      emit('file-change', file)
    }

    const removeFile = (index) => {
      emit('remove-file', index)
    }

    const sendQuestion = () => {
      if (content.value.trim() === '' && props.selectedFileList.length === 0) return
      emit('send-question', content.value)
      content.value = ''
    }

    const triggerFileUpload = () => {
      emit('trigger-upload')
    }

    const clickAdd = (event) => {
      event.target.value = null
    }

    return {
      textareaRef,
      rows,
      content,
      onFileChange,
      removeFile,
      sendQuestion,
      triggerFileUpload,
      clickAdd
    }
  },
  computed: {
    isContentEmpty() {
      return this.content.trim() === ''
    }
  }
}
</script>

<style scoped>
.question {
  display: flex;
  flex-direction: column;
  width: 100%;
  color: #fff;
  align-items: center;
  justify-content: center;
}

.upLoadFile {
  width: 55%;
  margin-bottom: 5px;
  display: flex;
}

.contain_chat {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  width: 60%;
  min-height: 50px;
  max-height: 215px;
  border-radius: 30px;
  border-style: solid;
  border: 1px solid #2f2f2f;
  background-color: #2f2f2f;
  padding: 5px;
  padding-left: 15px;
}

.contain_chat:focus-within {
  box-shadow: 0 0 10px rgba(141, 141, 147, 0.5);
}

.selectedFileList {
  display: flex;
}

.selectedFileList-in {
  margin-top: 10px;
  width: 260px;
  height: 60px;
  background-color: #171717;
  margin-right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
}

.selectedFileList-in-border {
  width: 90%;
  height: 50px;
  display: flex;
  align-items: center;
}

.file-img {
  margin-left: 10px;
  width: 40px;
  height: 40px;
  background-color: #244a96;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}

.file-name {
  width: 80px;
  margin-left: 10px;
  display: flex;
  flex-direction: column;
}

.others {
  display: flex;
}

.chat_input {
  flex: 1;
  min-height: 20px;
  max-height: 200px;
  resize: none;
  font-size: 18px;
  border-radius: 18px;
  border: 0;
  outline: none;
  background-color: transparent;
  color: #ccc;
  padding: 10px;
  margin-right: 10px;
}

.sendQuestion {
  display: flex;
  flex-direction: column-reverse;
  padding-right: 5px;
  padding-bottom: 5px;
}

.sendQuestion i.enabled {
  color: #fff;
}

.sendQuestion i.disabled {
  color: #a0a0a0;
}

.sendQuestion i:hover {
  color: #d0d0d0;
}
</style> 